<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="12">
        <div class="tit">框架简介</div>
      </el-col>
      <el-col :span="12" >
        <div class="tit2">技术选型</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <p>
         本系统是一套管理系统的基础功能，包含了首页登录，权限控制，用户管理，角色管理，菜单管理，部门管理，岗位管理，数据字典，系统参数，通知公告，日志管理，定时任务等功能。
         为设计和打印报表提供了报表管理与设计功能。
         为帮助开发人员快速开发代码，提供了表单构建，代码生成，系统接口等功能。为系统后期维护提供了在线用户，数据监控，服务监控，缓存监控，缓存列表等功能。
        </p>
        <p>
          集成了Mybatis-plus，lombok，积木报表，aj-captcha行为验证码，并把服务器由tomcat修改为undertow。同时可以在程序运行时添加JVM参数-Xms2g -Xmx4g -XX:+UseG1GC，
          设置虚拟机内存大小，并设置GC使用G1垃圾回收器
        </p>

      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="6">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>Spring Security</li>
              <li>积木报表</li>
              <li>JWT</li>
              <li>MyBatis-plus</li>
              <li>HikariCP</li>
              <li>Fastjson</li>
              <li>lombok</li>
              <li>aj-captcha</li>
              <li>websocket</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Sass</li>
              <li>Quill</li>
              <li>websocket</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>

    </el-row>
    <el-row>
      <div class="tit3">功能列表</div>
    </el-row>
    <el-row style="margin-bottom: 30px;">
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click1">
          <div class="ico1"><i class="el-icon-user-solid"></i></div>
          <div class="">用户管理</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click2">
          <div class="ico2"><i class="el-icon-s-custom"></i></div>
          <div class="">角色管理</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click3">
          <div class="ico3"><i class="el-icon-s-order"></i></div>
          <div class="">菜单管理</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click4">
          <div class="ico4"><i class="el-icon-s-flag"></i></div>
          <div class="">部门管理</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click5">
          <div class="ico5"><i class="el-icon-s-home"></i></div>
          <div class="">岗位管理</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click6">
          <div class="ico6"><i class="el-icon-s-cooperation"></i></div>
          <div class="">字典管理</div>
        </div>
      </el-col>

    </el-row>

    <el-row style="margin-bottom: 30px;">
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click7">
          <div class="ico7"><i class="el-icon-s-tools"></i></div>
          <div class="">参数设置</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click8">
          <div class="ico8"><i class="el-icon-s-opportunity"></i></div>
          <div class="">通知公告</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click9">
          <div class="ico9"><i class="el-icon-s-platform"></i></div>
          <div class="">日志管理</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click1">
          <div class="ico1"><i class="el-icon-s-grid"></i></div>
          <div class="">表单构建</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click2">
          <div class="ico2"><i class="el-icon-s-help"></i></div>
          <div class="">代码生成</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click3">
          <div class="ico3"><i class="el-icon-s-ticket"></i></div>
          <div class="">系统接口</div>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-bottom: 30px;">
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click7">
          <div class="ico6"><i class="el-icon-s-data"></i></div>
          <div class="">报表设计</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click8">
          <div class="ico5"><i class="el-icon-message-solid"></i></div>
          <div class="">定时任务</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click9">
          <div class="ico4"><i class="el-icon-view"></i></div>
          <div class="">服务监控</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click1">
          <div class="ico3"><i class="el-icon-coin"></i></div>
          <div class="">缓存监控</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click2">
          <div class="ico2"><i class="el-icon-set-up"></i></div>
          <div class="">缓存列表</div>
        </div>
      </el-col>
      <el-col :span="4" style="text-align: center;">
        <div class="hand" @click="click3">
          <div class="ico1"><i class="el-icon-user"></i></div>
          <div class="">在线用户</div>
        </div>
      </el-col>
    </el-row>

    <el-divider />

  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5",
    };
  },
  created() {

  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .ico1 {
    font-size: 50px;
    color: #ff0000;
  }

  .ico2 {
    font-size: 50px;
    color: #0081f1;
  }

  .ico3 {
    font-size: 50px;
    color: #2fc601;
  }

  .ico4 {
    font-size: 50px;
    color: #efac02;
  }

  .ico5 {
    font-size: 50px;
    color: #dc00ef;
  }

  .ico6 {
    font-size: 50px;
    color: #02c8da;
  }

  .ico7 {
    font-size: 50px;
    color: #e35f00;
  }

  .ico8 {
    font-size: 50px;
    color: #7101f0;
  }

  .ico9 {
    font-size: 50px;
    color: #dccf0e;
  }

  .tit {
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: solid 4px #006bcf;
    padding-left: 10px;
  }

  .tit2 {
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: solid 4px #6dcf5e;
    padding-left: 10px;
  }

  .tit3 {
    margin-top: 20px;
    margin-bottom: 20px;
    border-left: solid 4px #cf3c4f;
    padding-left: 10px;
  }

  .hand {
    cursor: pointer;
  }

  #sealdlg .el-dialog__body {
    padding: 0px 40px;
  }
}
</style>

